<template>
        <div class="main-div">
                <div class="father-div ">
                        <h2>父组件</h2>
                        <h3>我有一辆{{ car }}车</h3>
                        <h3>儿子的玩具{{toy}}</h3>
                        <ProsSon :car="car" :sendToy="getToy"/>
                </div>
        </div>
</template>
<script lang="ts" setup>
import ProsSon from './prosSon.vue'
import {ref} from 'vue'

let car =  ref("宝马")
let toy = ref() 
function getToy(value:string){
      toy.value = value
}
</script>
<style scoped>
.main-div {
        display: flex;
        justify-content: center;
        align-items: center;
}

.father-div {
        width: 600px;
        height: auto;
        background: orange;
        display: flex;
        justify-content: top;
        align-items: center;
        flex-direction: column;
        border: solid gray 1px;
        border-radius: 15px;
}
</style>